<template>
  <div>
    <card :cardHeight="cardHeight" noMore cardTitle="合作农场/抵押牛数量">
      <div class="flex flex-v flex-align-center flex-pack-center" style="height: 100%">
        <div
          class="count"
          v-for="(item, index) in typeList"
          :key="index"
          :style="{
            paddingTop: 19 * pageScale + 'px',
            paddingBottom: 19 * pageScale + 'px',
            marginTop: index > 0 ? 20 * pageScale + 'px' : 0,
            width: 282 * pageScale + 'px',
          }"
        >
          <div class="name flex flex-align-center" :style="{ fontSize: 22 * pageScale + 'px' }">
            <img src="/home/farm.png" alt="" v-if="item.type == 'farm'" :style="{ width: 24 * pageScale + 'px' }" />
            <img src="/home/cow.png" alt="" v-else :style="{ width: 24 * pageScale + 'px' }" />
            <span>{{ item.type == 'farm' ? '农场总数' : '抵押牛总数' }}</span>
          </div>
          <div class="flex flex-align-center">
            <span class="num">
              <ScrollNumber
                :itemStyle="{
                  fontSize: 37 * pageScale + 'px',
                }"
                class="scrollNumber"
                :value="item.value || 0"
              ></ScrollNumber>
            </span>
            <span :style="{ fontSize: 20 * pageScale + 'px' }">{{ item.type == 'farm' ? '个' : '头' }}</span>
          </div>
        </div>
      </div></card
    >
  </div>
</template>

<script>
import { mortgageapi } from '@/api/index.js';
import StatisticsMixins from '../StatisticsMixins';
import ScrollNumber from '@/components/vue-scroll-number/src/scroll-number';
import data from 'area-data';
export default {
  mixins: [StatisticsMixins],
  data() {
    return {
      typeList: [
        {
          type: 'farm',
          value: 0,
        },
        {
          type: 'cow',
          value: 0,
        },
      ],
    };
  },
  components: { ScrollNumber },
  props: {
    pageScale: {
      type: [String, Number],
      default: 1,
    },
  },
  methods: {
    getInfo() {
      this.$postAction(mortgageapi.echartsUrl.getFarmCount + '?orgId=' + this.globalOrgId).then((da) => {
        if (da.code == 1) {
          this.typeList[0].value = this.priceFormat(da.data, 0);
        }
      });
      this.$postAction(mortgageapi.echartsUrl.findPledgeCount + '?orgId=' + this.globalOrgId).then((da) => {
        if (da.code == 1) {
          this.typeList[1].value = this.priceFormat(da.data, 0);
        }
      });
    },
  },
};
</script>

<style scoped>
.count {
  width: 282px;
  background: #fafbfd;
  opacity: 1;
  border-radius: 6px;
  color: #868686;
  font-size: 20px;
  padding: 19px 0 19px 30px;
}

.name {
  font-size: 22px;
}
.num {
  color: #06706c;
  font-weight: bold;
  /* font-family: DIN; */
  margin-right: 24px;
}
img {
  width: 24px;
  /* height: 24px; */
  margin-right: 8px;
}
</style>
